<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        ul li {
            list-style: none;
            float: left;
            margin-left: 30px;
        }
        
        .d {
            width: 300px;
            height: 200px;
            clear: left;
            margin-left: 30px;
            margin-top: 30px;
            position: absolute;
        }
        
        .d1 {
            background-color: cadetblue;
            display: none;
            position: absolute;
        }
        
        .d2 {
            background-color: lightcoral;
            display: none;
            position: absolute;
        }
        
        .d3 {
            background-color: lightblue;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <ul>
        <li style="color: cadetblue">tab1</li>
        <li style="color: lightcoral">tab2</li>
        <li style="color:lightblue">tab3</li>


    </ul>

    <div class="d d1"></div>
    <div class="d d2"></div>
    <div class="d d3"></div>
</body>

</html>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
    //给li添加点击事件
    $("li").click(function() {
        //获取li的下标
        let index = $(this).index();
        console.log(index)
            //将与下标匹配的div 显示出来show()
        $("div").hide();
        $("div").eq(index).show();
    })
</script>